package myJs.detailInfo

import cats.effect.IO
import japgolly.scalajs.react.ScalaFnComponent
import japgolly.scalajs.react.util.EffectCatsEffect._
import japgolly.scalajs.react.vdom.all._
import myJs.myPkg.Hooks._
import myJs.myPkg.tabs._

/** Created by yz on 28/11/2023
  */
object SvCp {

  case class Props(id: String)

  val Component = ScalaFnComponent[Props] { props =>
    val (hasSvData, setHasSvData) = useState(true)
    val initTab = List("svPlot", "svData")(0)
    val (tab, setTab) = useState(initTab)

    object FTool {

      def tabChange = (v: String) => {
        setTab(v)
      }

    }

    div(
      h4("SV"),
      Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
        Tab(eventKey = "svPlot", title = s"SV Plot")(
          div(
            marginTop := 20.px,
            SvPlotCp(id = props.id)
          )
        ),
        if (hasSvData) {
          Tab(eventKey = "svData", title = s"SV Data")(
            div(
              marginTop := 20.px,
              SvDataCp(id = props.id, hasChange = setHasSvData.toIO)
            )
          )
        } else EmptyVdom
      )
    )

  }

  def apply(id: String) = {
    Component(Props(id))
  }

}
